
// // // 当页面加载完毕之后再执行load
// window.addEventListener('load', function () {
//     var preview_img = document.querySelector('.preview_img');
//     var mask = document.querySelector('.mask');
//     var big = document.querySelector('.big');
//     // 1. 当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big 大盒子
//     preview_img.addEventListener('mouseover', function() {
//         mask.style.display = 'block';
//         big.style.display = 'block';
//     })
//     preview_img.addEventListener('mouseout', function() {
//             mask.style.display = 'none';
//             big.style.display = 'none';
//         })
//         // 2. 鼠标移动的时候，让黄色的盒子跟着鼠标来走
//     preview_img.addEventListener('mousemove', function(e) {
//         // (1). 先计算出鼠标在盒子内的坐标
//         var x = e.pageX - this.offsetLeft;
//         var y = e.pageY - this.offsetTop;
//         // console.log(x, y);
//         // (2) 减去盒子高度 300的一半 是 150 就是我们mask 的最终 left 和top值了
//         // (3) 我们mask 移动的距离
//         var maskX = x - mask.offsetWidth / 2;
//         var maskY = y - mask.offsetHeight / 2;
//         // (4) 如果x 坐标小于了0 就让他停在0 的位置
//         // 遮挡层的最大移动距离
//         var maskMax = preview_img.offsetWidth - mask.offsetWidth;
//         if (maskX <= 0) {
//             maskX = 0;
//         } else if (maskX >= maskMax) {
//             maskX = maskMax;
//         }
//         if (maskY <= 0) {
//             maskY = 0;
//         } else if (maskY >= maskMax) {
//             maskY = maskMax;
//         }
//         mask.style.left = maskX + 'px';
//         mask.style.top = maskY + 'px';
//         // 3. 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
//         // 大图
//         var bigIMg = document.querySelector('.bigImg');
//         // 大图片最大移动距离
//         var bigMax = bigIMg.offsetWidth - big.offsetWidth;
//         // 大图片的移动距离 X Y
//         var bigX = maskX * bigMax / maskMax;
//         var bigY = maskY * bigMax / maskMax;
//         bigIMg.style.left = -bigX + 'px';
//         bigIMg.style.top = -bigY + 'px';

//     })

// })


// // 2.
// window.addEventListener('load', function () {
//     // 获取
//     var preview_img = document.querySelector('.preview_img')
//     var mask = document.querySelector('.mask')
//     var big = document.querySelector('.big')


//     // 1. 当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big 大盒子
//     preview_img.addEventListener('mouseover', function () {
//         mask.style.display = 'block';
//         big.style.display = 'block';
//     })
//     preview_img.addEventListener('mouseout', function () {
//         mask.style.display = 'none';
//         big.style.display = 'none';
//     })
//     // 2. 鼠标移动的时候，让黄色的盒子跟着鼠标来走

//     preview_img.addEventListener('mousemove', function (e) {
//         // (1). 先计算出鼠标在盒子内的坐标
//         var x = e.pageX - this.offsetLeft;
//         var y = e.pageY - this.offsetTop;

//         // (2) 减去盒子高度 300的一半 是 150 就是我们mask 的最终 left 和top值了
//         // (3) 我们mask 移动的距离（范围）
//         var maskX = x - mask.offsetWidth / 2;
//         var maskY = y - mask.offsetHeight / 2;
//         // (4) 如果x 坐标小于了0 就让他停在0 的位置
//         // mask移动的最大距离等于图片的宽度减去mask的宽度

//         var maskMax = preview_img.offsetWidth - mask.offsetWidth;
//         // var maskMaX2= preview_img.offsetHeight - mask.offsetHeight;
//         // 当x轴移动最大距离等小于0的时候，x轴则不能在移动
//         if (maskX <= 0) {
//             maskX = 0;

//             // 当x轴移动距离大于等于最大能移动距离的时候等于最大移动距离
//         } else if (maskX >= maskMax) {
//             maskX = maskMax;

//         }
//         // 当Y轴移动最大距离等小于0的时候，则不能在移动
//         if (maskY <= 0) {
//             maskY = 0;

//             // 当Y轴移动距离大于等于最大能移动距离的时候等于最大移动距离
//         } else if (maskY >= maskMax) {
//             maskY = maskMax;

//         }
//         mask.style.left = maskX + 'px';
//         mask.style.top = maskY + 'PX';
//         // 3. 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
//         // 获取大图里面的手机大图片
//         var bigImg = document.querySelector('.bigImg')
//         // 遮挡层移动距离maskX  maskY
//         // 大图片最大移动距离 big.offsetWidth-bigImg.offsetWidth
//         // 大盒子里面的大图片大于大盒子，所以要用大图片的宽度减去大盒子的宽度
//         var bigMax = -(big.offsetWidth - bigImg.offsetWidth);
//         // 遮挡层的最大移动距离  maskMax
//         var bigX = maskX * bigMax / maskMax
//         var bigY = maskY * bigMax / maskMax;
//         // 因为移动方向是相反的，所以需要负数
//         bigImg.style.left = -bigX + 'px';
//         bigImg.style.top = - bigY + 'px';
//     })

// })

// 第三次
// 当鼠标移动到preview_img上面时,mask 黄色盒子出现，big大盒子出现
// 获取

// window.addEventListener('load', function () {

//     var preview_img = document.querySelector('.preview_img')
//     var mask = document.querySelector('.mask');
//     var big = document.querySelector('.big');


//     preview_img.addEventListener('mouseover', function () {
//         mask.style.display = 'block';
//         big.style.display = 'block';
//     })
//     preview_img.addEventListener('mouseout', function () {
//         mask.style.display = 'none';
//         big.style.display = 'none';
//     })

//     // 当鼠标在盒子移动时，mask的坐标等于鼠标在盒子里的坐标
//     // 先求出鼠标在盒子里的坐标
//     // 鼠标在盒子里的坐标等于鼠标在页面的坐标减去preview_img盒子的偏移值
//     // 因为鼠标在mask中间，所以还需要鼠标盒子里的坐标减去mask宽高的一半
//     preview_img.addEventListener('mousemove', function (e) {
//         var x = e.pageX - this.offsetLeft;
//         var y = e.pageY - this.offsetTop;

//         var maskX = x - mask.offsetWidth / 2;
//         var maskY = y - mask.offsetHeight / 2;

//         // 控制盒子移动范围
//         // 鼠标能移动的最大距离等于大盒子减去mask的值
//         // 当水平方向不再能移动的时候，则mask的坐标为0，当超过最大值时，只能等于最大值

//         // bigImg 能在大盒子里面移动的坐标
//         var maskMax = preview_img.offsetWidth - mask.offsetWidth;
//         if (maskX <= 0) {
//             maskX = 0;
//         } else if (maskX >= maskMax) {
//             maskX = maskMax;
//         }
//         if (maskY <= 0) {
//             maskY = 0;
//         } else if (maskY >= maskMax) {
//             maskY = maskMax;
//         }
//         mask.style.left = maskX + 'px';
//         mask.style.top = maskY + 'px';

//         var bigImg = document.querySelector('.bigImg');
//         // 3. 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
//         var bigMax = bigImg.offsetWidth - big.offsetWidth;
//         // 先减后加
//         var bigx = maskX *( bigImg.offsetWidth - big.offsetWidth )/ maskMax;
//         var bigy = maskY * (bigImg.offsetHeight - big.offsetHeight) / maskMax;
//         // 这里一定要加px
//         bigImg.style.left = -bigx+'px';
//         bigImg.style.top = -bigy+'px';

//     })

// })


// 第四次
// 当鼠标移动到左边小盒子的时候，显示mask 还有右边大盒子
// 当鼠标移走的时候，隐藏
// 当鼠标在小盒子里面移动时候，mask坐标等于鼠标坐标减去自身在小盒子里面坐标的一半
// 此时，求大盒子里面大图片的坐标，
// 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离


window.addEventListener('load', function () {
    var preview_img = document.querySelector('.preview_img')
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');

    preview_img.addEventListener('mouseover', function () {
        mask.style.display = 'block';
        big.style.display = 'block';

    })
    preview_img.addEventListener('mouseout', function () {
        mask.style.display = 'none';
        big.style.display = 'none';

    })

    preview_img.addEventListener('mousemove', function (e) {
        // 求mask坐标
        // 鼠标在盒子里的坐标等于鼠标在页面的坐标减去盒子的偏移值
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // mask 的坐标
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;


        // 这里坐标还没有赋值给mask,所以不会移动
        // 控制mask移动范围,小盒子减去mask
        var maskMax = preview_img.offsetWidth - mask.offsetWidth;
        if (maskX <= 0) {
            maskX = 0;
        } else if (maskX >= maskMax) {
            maskX = maskMax;
        }
        if (maskY <= 0) {
            maskY = 0;
        } else if (maskY >= maskMax) {
            maskY = maskMax;
        }


        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';


        // 大盒子里面大图片的位置
        // 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
        var bigImg = document.querySelector('.bigImg')
        // 遮挡层移动距等于maxx maxy
        // 大图片最大距离等于大图片减去大盒子
        var bigmax = bigImg.offsetWidth - big.offsetWidth;
        var bigx= maskX * bigmax / maskMax;
        var bigy = maskY * bigmax / maskMax;

        bigImg.style.left =- bigx + 'px';
        bigImg.style.top = -bigy + 'PX';

    })


})










